<template>
  <div>
    <el-card style="margin-bottom: 10px">
      <el-row>
        <el-col :span="2" style="color:#f44;font-weight: bold">{{value}}</el-col>
        <el-col :span="10">
          <el-rate
            v-model="value"
            disabled
            :colors="['#f44', '#f44', '#f44']">
          </el-rate>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <span style="font-size: 12px">味道 {{rate[0]}} 包装 {{rate[1]}} 配送 {{rate[2]}} </span>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-button size="mini" plain type="primary" style="margin-bottom: 10px">全部 {{count[0]}}</el-button>
      <el-button size="mini" plain type="primary" style="margin-bottom: 10px">最新</el-button>
      <el-button size="mini" plain type="primary" style="margin-bottom: 10px">好评 {{count[1]}}%</el-button>
      <br>
      <el-button size="mini" plain type="primary" style="margin-bottom: 10px">差评 {{count[2]}}%</el-button>
      <el-button size="mini" plain type="primary" style="margin-bottom: 10px">有图 {{count[3]}}</el-button>
      <br>
      <el-radio v-model="radio" label="1">只看有内容的评论</el-radio>
    </el-card>
    <div>
      <el-row v-for="i in 8" :key="i" style="margin:0 10px 20px;">
        <el-col :span="3">
          <el-avatar shape="square" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-avatar>
        </el-col>
        <el-col :span="21">
          <div style="display: flex;justify-content: space-between">
            <span>匿名用户</span>
            <span style="font-size: 12px;color: grey">2019-10-08</span>
          </div>
          <el-rate
            :value="1"
            disabled show-text text-color="#f44"
            :colors="['#f44', '#f44', '#f44']">
          </el-rate>
          <p style="margin:5px 0 10px;">评论内容</p>
          <span style="margin-right:10px;color: #409EFF;background-color:RGB(236,245,255);padding: 5px;font-size: 13px "
            :key="tag"
            v-for="tag in dynamicTags">
            {{tag}}
          </span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Comment",
        data() {
            return {
                value: 4.7,
                rate: ['4.3', '4.3', '5.0'],
                count:[18,77,11,2],
                radio:'1',
                dynamicTags: ['标签一', '标签二', '标签三', '标签四', '标签五'],
            }
        }
    }
</script>

<style scoped>
  .el-divider {
    margin: 10px 0;
  }
  p{
    margin: 0;
    font-size: 14px;
  }
  span{
    font-size: 14px;
  }
  .el-tag + .el-tag {
    margin: 10px;
  }

</style>
